<template>
  <div class="home">
     <div class="input">
      <input type="text" placeholder="请输入用户名" v-model="ruleForm.user"><br>
      <input type="password" placeholder="请输入密码" v-model="ruleForm.pass">
      <button @click="btn">登录</button>
    </div>
    <p><router-link to="/about">还没账号?</router-link><router-link to="">暂不登录</router-link></p>
  </div>
</template>

<script>

export default {
  data() {
    var checkuser = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('用户名不能为空'));
      }
      callback()
    };
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else if (!/^[a-zA-Z0-9_-]{4,16}$/.test(value)) {
        callback(new Error('请按规则输入'))
      }else {
        callback();
      }
      
    };
    return {
      ruleForm: {
        pass: '',
        checkPass: '',
        user: '',
        tel: ''
      },
      rules: {
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ],
        user: [
          { validator: checkuser, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    btn() {
      this.axios.post('http://127.0.0.1:3000/login', {
        username: this.ruleForm.user,
        password: this.ruleForm.pass
      }).then(res => {
        //发送成功 登录成功 登录失败
        //成功要进行本地存储
        console.log(res);
        if (res.data.errCode == 0) {
          this.$message({
            message: res.data.errMsg,
            type: 'success',
            duration: 500
          })
          localStorage.setItem('tokenID', res.data.tokenID)
          localStorage.setItem('username', res.data.username)
          this.$router.push('/dy')
        } else {
          this.$message(res.data.errMsg)
        }
      }).catch(error => {
        console.log(error)
      })
    }
  },
}
</script>
<style lang="scss">
a{
  text-decoration: none;
}
a:visited{
  color: black;
}
*{
  padding: 0;
  margin: 0;
}
.input{
  width: 100vw;
  height: 30vh;
  background-color: #F8F8F8;
  input:nth-child(1){
    margin-top: 20%;
  }
  input{
    outline: none;
    background-color: #F7F7F7;
    border: none;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
    width: 100%;
    height: 20%;
    text-align: center;
  }
  button{
    margin-top: 5%;
    width: 95%;
    height: 20%;
    margin-left: 2.5%;
    background-color: #076FA2;
    color: white;
    border-radius: 5px;
    border: none;
  }
}
body{

  width: 100%;
  height: 100%;
  background-color: #F0F3F9;
}
.home{
  p{
    margin-top: 10px;
    width: 100%;
    a{
      font-size: 14px;
      display: inline-block;
      width: 50%;
      text-align: right;
    }
    a:nth-child(1){
      text-align: left;
    }
  }
}
</style>